<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .active{
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="app">


    </div>
    <script src="./vue.js"></script>
    <script>
        var app=new  Vue({
            el:"#app",
            data:function(){
                return{
                    msg:"指令系统",
                    msg2:"<h1>我是指令系统</h2>",
                        isshow:true,
                        isGreen:false,
                        text:"嘿嘿嘿",
                        menuLists:[
                            {id:1,name:'宫保鸡丁',price:70},
                            {id:2,name:'西红柿炒蛋',price:50},
                            {id:3,name:'辣椒炒肉',price:35}
                        ],
                        person:{
                            name:'小可爱',
                            age:10,
                            fav:"唱歌"
                        },
                        
                }
            },
            template:`
            <div class='app'>
                <h2>{{msg}}</h2>
                <p v-text="msg"></p>
                <span v-html="100+1"></span>
                <div v-html="msg2"></div>
                <div V-if="isshow">我要暴富了</div> 
                <div V-if="!isshow">我要穷了</div> 

                //if
                <div v-if="Math.random()>0.5">
                    已显示
                    </div>
                    //else
                    <div v-else>已隐藏</div>
  
               
                    <div class="box" v-bind:class="{active:!isGreen}" v-on:click='clickHandler' :aa='text'></div>
                <ul>
                //v-for 下面遍历
                    <li v-for='i in menuLists'>
                        <h2>{{i.id}}</h2>
                        <h3>{{i.name}}</h3>
                        <h4>{{i.price}}</h4>
                        </li>
                    </ul>
                    <ul>
                        <li v-for='(value,key) in person'>
                            {{key}}==={{value}}
                            </li>
                        </ul>
                </div>
            ` ,
            methods: {
                clickHandler(e){
                    console.log(this);
                    this.isGreen=!this.isGreen;
                }
            }
        });
        console.log(app);
    </script>
</body>
</html>